<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4>用户信息</h4></div>
                    <div class="card-body">
                        <div class="form-group">
                            <div class="row show-grid">
                                <div class="col-xs-6 col-md-2"> 头像：<img class="img-avatar img-avatar-48 m-r-10"
                                                                        :src="userInfo.headimgurl" alt=""></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row show-grid span-row-gutter">
                                <span> 用户名：{{ userInfo.nickname }}</span>
                                <span> 手机：{{ userInfo.mobile }}</span>
                                <span> 用户名ID：{{ userInfo.userId }}</span>
                                <span> 代理ID：{{ userInfo.userId }}</span>
                                <span> 微信二维码：<a href="javascript:void(0)"
                                                @click="getQrCode(userInfo.qrCode)">点击查看</a></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row show-grid span-row-gutter">
                                <span> 关注公司：{{ userInfo.companyStr }}</span>
                                <!--<span> 关注分类：{{ userInfo.categoryStr }}</span>-->
                                <span> 关注状态：
                                    <template v-if="userInfo.isFollow">关注中</template>
                                    <template v-else>已取关</template>
                                </span>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleSet()">编辑关注信息
                                </el-button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row show-grid span-row-gutter">
                                <span> 注册时间：{{ userInfo.created_at }}</span>
                                <span> 付费时间：{{ userInfo.payDate }}</span>
                                <span v-if="userInfo.isVip"> 会员截止：{{ userInfo.vipTime | moment("YYYY-MM-DD HH:mm:ss") }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row show-grid span-row-gutter">
                                <span> 直接代理：{{ userInfo.recommendName }}</span>
                                <span> 高级代理：{{ userInfo.highLevelName }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row show-grid">
                                <div class="col-xs-6 col-md-3"> 操作：
                                    <el-button type="danger" @click="giveVip">赠送会员</el-button>
                                </div>

                                <div class="col-xs-6 col-md-3" v-if="userInfo.isVip">
                                    <el-button type="danger" @click="closeVip(userInfo.userId)">关闭会员</el-button>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="order_sn"
                                        label="订单编号"
                                        align="center"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="service_name"
                                        label="会员类型"
                                        align="center"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="price"
                                        label="订单金额"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="direct_commission"
                                        label="直推佣金"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="disseminate_commission"
                                        label="间推佣金"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        prop="statusText"
                                        label="订单状态"
                                        align="center"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        prop="nick_name"
                                        label="下单用户"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        prop="recommendName"
                                        label="直接代理"
                                        align="center"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        prop="mobile"
                                        align="center"
                                        label="手机号"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="created_at"
                                        align="center"
                                        label="下单时间"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="170"
                                >
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="success" @click="handleStatus(scope.row._id,1)"
                                                   v-if="scope.row.status===8">退款关闭
                                        </el-button>
                                    </template>

                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>

                        </div>



                        <el-dialog title="用户设置" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                            <el-form :model="form">

                               <!-- <el-form-item label="关联分类" :label-width="formLabelWidth">
                                    <el-autocomplete
                                            v-model="form.categoryName"
                                            :fetch-suggestions="queryIndustrySearchAsync"
                                            placeholder="请输入内容"
                                            @select="handleIndustryQuerySelect"
                                            style="width: 100%"
                                    ></el-autocomplete>
                                    <el-tag
                                            :key="tag.id"
                                            v-for="tag in form.categoryTags"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleIndustryClose(tag)">
                                        {{tag.value}}
                                    </el-tag>
                                </el-form-item>-->

                                <el-form-item label="关联公司" :label-width="formLabelWidth">
                                    <el-autocomplete
                                            v-model="form.companyName"
                                            :fetch-suggestions="queryCompanyAsync"
                                            placeholder="请输入内容"
                                            @select="handleCompanySelect"
                                            style="width: 100%"
                                    ></el-autocomplete>
                                    <el-tag
                                            :key="tag.id"
                                            v-for="tag in form.companyTags"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleCompanyClose(tag)">
                                        {{tag.value}}
                                    </el-tag>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitSet">确 定</el-button>
                            </div>
                        </el-dialog>

                        <el-dialog title="赠送会员" :visible.sync="vipFormVisible" :close-on-click-modal="false">
                            <el-form :model="formD">
                                <el-form-item label="赠送时长" :label-width="formLabelWidth">
                                    <el-input-number v-model="formD.vipTime" :min="0" :max="100"
                                                     label="排序"></el-input-number> 月
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="vipFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="vipSet">确 定</el-button>
                            </div>
                        </el-dialog>

                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WechatUserDetailComponent",
        data() {
            return {
                loading: false,
                userInfo: {},
                id: $('meta[name="id"]').attr('content'),
                companies: [],
                restaurants: [],
                dialogFormVisible: false,
                vipFormVisible: false,
                form: {
                    /*categoryTags: [],
                    categoryIds: [],*/
                    companyTags: [],
                    companyIds: []
                },
                formD: {
                    vipTime: 6
                },
                formLabelWidth: "120px",
                pageActive: true,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
            }
        },
        methods: {
            getInfo: function () {
                let self = this;
                let uri = "wechat-user/" + self.id;
                self.loading = true;

                axios.get(uri).then(function (data) {
                    var result = data.result;
                    self.userInfo = result;
                    self.loading = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            getQrCode: function (qrCode) {
                let self = this;
                if (!qrCode){
                    self.$message.error("该用户，暂未上传二维码！”");
                    return;
                }


                var html = "<img src='" + qrCode + "'/>";
                self.$alert(html, '二维码（点击右键保存）', {
                    dangerouslyUseHTMLString: true
                });
            },
            handleSet() {
                let self = this;
                self.dialogFormVisible = true;

                this.form.companyTags = self.userInfo.companies;
                /*this.form.categoryTags = self.userInfo.categoryNames;

                self.userInfo.categoryNames.forEach((item) => {
                    this.form.categoryIds.push(item.id)
                });*/

                self.userInfo.companies.forEach((item) => {
                    this.form.companyIds.push(item.id)
                });
            },
            submitSet() {
                let self = this;
                self.loading = true;
                let uri = "wechat-user/set/" + self.id;
                self.dialogFormVisible = false;
                axios.put(uri, self.form).then(function (result) {
                    //self.getInfo();
                    location.reload();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            vipSet() {
                let self = this;
                self.loading = true;
                let uri = "wechat-user/give-vip/" + self.id;
                self.vipFormVisible = false;
                axios.put(uri, self.formD).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            async queryIndustry(keyword = '') {
                let self = this;
                let uri = "category/search/"+keyword;
                axios.get(uri).then(function (result) {
                    self.restaurants = result.list;
                });

            },
            async queryIndustrySearchAsync(queryString, cb) {

                await this.queryIndustry(queryString);

                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            handleIndustryQuerySelect(item) {
                if (item && this.form.categoryIds.indexOf(item.id) === -1) {
                    this.form.categoryTags.push(item);
                    this.form.categoryIds.push(item.id);
                }
                this.form.categoryName = '';
            },
            handleIndustryClose(tag) {
                this.form.categoryTags.splice(this.form.categoryTags.indexOf(tag), 1);
                this.form.categoryIds.splice(this.form.categoryIds.indexOf(tag.id));
            },
            async queryCompany(keyword = '') {
                let self = this;
                let uri = "company/search/"+keyword;

                axios.get(uri).then(function (result) {
                    self.companies = result.list;
                });
            },
            async queryCompanyAsync(queryString, cb) {

                await this.queryCompany(queryString);

                var restaurants = this.companies;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            handleCompanySelect(item) {
                if (item && this.form.companyIds.indexOf(item.id) === -1) {
                    this.form.companyTags.push(item);
                    this.form.companyIds.push(item.id);
                }
                this.form.companyName = '';
            },
            handleCompanyClose(tag) {
                this.form.companyTags.splice(this.form.companyTags.indexOf(tag), 1);
                this.form.companyIds.splice(this.form.companyIds.indexOf(tag.id), 1);
            },

            handleSearchSelect(item) {
                if (item && this.ids.indexOf(item.id) === -1) {
                    this.tags.push(item);
                    this.ids.push(item.id);
                }
            },
            handleSearchClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
                this.ids.splice(this.ids.indexOf(tag.id), 1);
            },
            giveVip:function () {
                let self = this;
                self.vipFormVisible = true;
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            search: function () {
                let self = this;
                let uri = 'order/post-list';
                self.loading = true;

                let postData = {
                    page: self.currentPage,
                    limit: self.pageSize,
                    user_id:self.userInfo.userId,
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.orders.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.orders.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            closeVip(userId) {
                let self = this;
                let tipStr = "您确定要关闭会员吗, 是否继续?";
                self.$confirm(tipStr, '会员关闭', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.closeVipRequire(userId)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            closeVipRequire: function (userId) {
                let self = this;
                let uri = "wechat-user/close-vip/" + userId;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
        },
        mounted() {
            this.getInfo();
            this.queryCompany();
            this.queryIndustry();
        }
    }
</script>

<style scoped>
    .show-grid {
        border-bottom: 1px solid rgba(77, 82, 89, 0.05);
        padding-bottom: 14px;
    }
</style>
